<template>
  <div class="statistics-dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <img src="../../assets/image/icon2.png" class="title-icon" alt="">
        <h2>应用统计仪表盘</h2>
      </div>
      <div class="header-actions">
        <div class="back-home-btn" @click="goHome">
          <i class="el-icon-house"></i>
          返回首页
        </div>
        <div class="refresh-btn" @click="refreshData">
          <i class="el-icon-refresh"></i>
          刷新数据
        </div>
      </div>
    </div>

    <!-- 概览卡片区域 -->
    <div class="overview-cards">
      <div class="stat-card">
        <div class="stat-icon apps">📱</div>
        <div class="stat-content">
          <div class="stat-number">{{ overviewData.totalApps || 0 }}</div>
          <div class="stat-label">总应用数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon downloads">📥</div>
        <div class="stat-content">
          <div class="stat-number">{{ overviewData.totalDownloads || 0 }}</div>
          <div class="stat-label">总下载量</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon views">👁️</div>
        <div class="stat-content">
          <div class="stat-number">{{ overviewData.totalViews || 0 }}</div>
          <div class="stat-label">总浏览量</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon developers">👨‍💻</div>
        <div class="stat-content">
          <div class="stat-number">{{ overviewData.activeDevelopers || 0 }}</div>
          <div class="stat-label">活跃开发者</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <!-- 第一行：业务类型分布和趋势分析 -->
      <div class="charts-row">
        <div class="chart-section large-chart">
          <div class="chart-header">
            <h3>业务类型分布</h3>
            <div class="chart-tabs">
              <el-radio-group v-model="bizTypeTab" @change="loadBizTypeData" size="small">
                <el-radio-button label="bizType">大业务类型</el-radio-button>
                <el-radio-button label="subBizType">细分业务类型</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-content">
            <div id="bizTypePieChart" class="chart"></div>
          </div>
        </div>

        <div class="chart-section large-chart">
          <div class="chart-header">
            <h3>趋势分析</h3>
            <div class="chart-tabs">
              <el-radio-group v-model="trendTab" @change="loadTrendData" size="small">
                <el-radio-button label="download">下载量趋势</el-radio-button>
                <el-radio-button label="view">浏览量趋势</el-radio-button>
              </el-radio-group>
              <el-radio-group v-model="timeRange" @change="loadTrendData" size="small" style="margin-left: 10px;">
                <el-radio-button label="daily">按天</el-radio-button>
                <el-radio-button label="monthly">按月</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-content">
            <div id="trendAnalysisChart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 第二行：三个排行榜 -->
      <div class="charts-row">
        <div class="chart-section">
          <div class="chart-header">
            <h3>下载量排行榜</h3>
            <el-select v-model="downloadLimit" @change="loadDownloadRanking" size="small" style="width: 100px;">
              <el-option label="Top 5" :value="5"></el-option>
              <el-option label="Top 10" :value="10"></el-option>
              <el-option label="Top 20" :value="20"></el-option>
            </el-select>
          </div>
          <div class="chart-content">
            <div id="downloadRankingChart" class="chart"></div>
          </div>
        </div>

        <div class="chart-section">
          <div class="chart-header">
            <h3>浏览量排行榜</h3>
            <el-select v-model="viewLimit" @change="loadViewRanking" size="small" style="width: 100px;">
              <el-option label="Top 5" :value="5"></el-option>
              <el-option label="Top 10" :value="10"></el-option>
              <el-option label="Top 20" :value="20"></el-option>
            </el-select>
          </div>
          <div class="chart-content">
            <div id="viewRankingChart" class="chart"></div>
          </div>
        </div>

        <div class="chart-section">
          <div class="chart-header">
            <h3>开发者排行榜</h3>
            <el-select v-model="developerLimit" @change="loadDeveloperRanking" size="small" style="width: 100px;">
              <el-option label="Top 5" :value="5"></el-option>
              <el-option label="Top 10" :value="10"></el-option>
              <el-option label="Top 20" :value="20"></el-option>
            </el-select>
          </div>
          <div class="chart-content">
            <div id="developerRankingChart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatisticsOverview, getBizTypeDistribution, getSubBizTypeDistribution, 
         getDownloadRanking, getViewRanking, getDeveloperRanking, 
         getDownloadTrend, getViewTrend } from '../../assets/api/api.js'
import { safeSetOption, validateChartOption, createEmptyChartOption } from '../../utils/echartsHelper.js'

export default {
  name: 'StatisticsDashboard',
  data() {
    return {
      // 概览数据
      overviewData: {},
      
      // 图表实例
      bizTypePieChart: null,
      downloadRankingChart: null,
      viewRankingChart: null,
      trendAnalysisChart: null,
      developerRankingChart: null,
      
      // 控制参数
      bizTypeTab: 'bizType',
      trendTab: 'download',
      timeRange: 'daily',
      downloadLimit: 10,
      viewLimit: 10,
      developerLimit: 10,
      
      // 数据
      bizTypeData: [],
      subBizTypeData: [],
      downloadRankingData: [],
      viewRankingData: [],
      developerRankingData: [],
      downloadTrendData: [],
      viewTrendData: []
    }
  },
  mounted() {
    this.initCharts()
    this.loadAllData()
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.$nextTick(() => {
        try {
          // 确保DOM元素存在
          const bizTypeElement = document.getElementById('bizTypePieChart')
          const downloadElement = document.getElementById('downloadRankingChart')
          const viewElement = document.getElementById('viewRankingChart')
          const trendElement = document.getElementById('trendAnalysisChart')
          const developerElement = document.getElementById('developerRankingChart')
          
          if (bizTypeElement) {
            this.bizTypePieChart = echarts.init(bizTypeElement)
          }
          if (downloadElement) {
            this.downloadRankingChart = echarts.init(downloadElement)
          }
          if (viewElement) {
            this.viewRankingChart = echarts.init(viewElement)
          }
          if (trendElement) {
            this.trendAnalysisChart = echarts.init(trendElement)
          }
          if (developerElement) {
            this.developerRankingChart = echarts.init(developerElement)
          }
          
          // 监听窗口大小变化
          window.addEventListener('resize', this.resizeCharts)
        } catch (error) {
          console.error('图表初始化失败:', error)
        }
      })
    },
    
    // 调整图表大小 - 添加错误处理
    resizeCharts() {
      try {
        if (this.bizTypePieChart && this.bizTypePieChart.resize) {
          this.bizTypePieChart.resize()
        }
        if (this.downloadRankingChart && this.downloadRankingChart.resize) {
          this.downloadRankingChart.resize()
        }
        if (this.viewRankingChart && this.viewRankingChart.resize) {
          this.viewRankingChart.resize()
        }
        if (this.trendAnalysisChart && this.trendAnalysisChart.resize) {
          this.trendAnalysisChart.resize()
        }
        if (this.developerRankingChart && this.developerRankingChart.resize) {
          this.developerRankingChart.resize()
        }
      } catch (error) {
        console.warn('图表调整大小过程中发生错误，已屏蔽:', error.message)
      }
    },
    
    // 加载所有数据
    async loadAllData() {
      await Promise.all([
        this.loadOverviewData(),
        this.loadBizTypeData(),
        this.loadDownloadRanking(),
        this.loadViewRanking(),
        this.loadDeveloperRanking(),
        this.loadTrendData()
      ])
    },
    
    // 返回首页
    goHome() {
      this.$router.push({ path: '/' })
    },
    
    // 刷新数据
    async refreshData() {
      this.$message.success('正在刷新数据...')
      await this.loadAllData()
      this.$message.success('数据刷新完成')
    },
    
    // 加载概览数据
    async loadOverviewData() {
      try {
        const res = await getStatisticsOverview()
        if (res.code === 0) {
          this.overviewData = res.data
        }
      } catch (error) {
        console.error('加载概览数据失败:', error)
      }
    },
    
    // 加载业务类型数据
    async loadBizTypeData() {
      try {
        const res = this.bizTypeTab === 'bizType' 
          ? await getBizTypeDistribution()
          : await getSubBizTypeDistribution()
        
        if (res.code === 0) {
          this.renderBizTypePieChart(res.data)
        }
      } catch (error) {
        console.error('加载业务类型数据失败:', error)
      }
    },
    
    // 加载下载量排行榜
    async loadDownloadRanking() {
      try {
        const res = await getDownloadRanking(this.downloadLimit)
        if (res.code === 0) {
          this.downloadRankingData = res.data
          this.renderDownloadRankingChart(res.data)
        }
      } catch (error) {
        console.error('加载下载量排行榜失败:', error)
      }
    },
    
    // 加载浏览量排行榜
    async loadViewRanking() {
      try {
        const res = await getViewRanking(this.viewLimit)
        if (res.code === 0) {
          this.viewRankingData = res.data
          this.renderViewRankingChart(res.data)
        }
      } catch (error) {
        console.error('加载浏览量排行榜失败:', error)
      }
    },
    
    // 加载开发者排行榜
    async loadDeveloperRanking() {
      try {
        const res = await getDeveloperRanking(this.developerLimit)
        if (res.code === 0) {
          this.developerRankingData = res.data
          this.renderDeveloperRankingChart(res.data)
        }
      } catch (error) {
        console.error('加载开发者排行榜失败:', error)
      }
    },
    
    // 加载趋势数据
    async loadTrendData() {
      try {
        console.log('开始加载趋势数据，trendTab:', this.trendTab, 'timeRange:', this.timeRange)
        const res = this.trendTab === 'download' 
          ? await getDownloadTrend(this.timeRange)
          : await getViewTrend(this.timeRange)
        
        console.log('趋势数据API响应:', res)
        if (res.code === 0) {
          console.log('趋势数据:', res.data)
          this.renderTrendChart(res.data)
        } else {
          console.error('趋势数据API返回错误:', res.message)
        }
      } catch (error) {
        console.error('加载趋势数据失败:', error)
      }
    },
    
    // 渲染业务类型饼图
    renderBizTypePieChart(data) {
      if (!this.bizTypePieChart) {
        console.warn('饼图实例不存在')
        return
      }
      
      const title = this.bizTypeTab === 'bizType' ? '大业务类型分布' : '细分业务类型分布'
      
      // 数据验证
      if (!data || !Array.isArray(data) || data.length === 0) {
        console.log('饼图数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: title,
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          series: [{
            name: '业务类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [{ value: 0, name: '暂无数据' }]
          }]
        }
        this.bizTypePieChart.setOption(emptyOption, true)
        return
      }
      
      // 处理数据
      const chartData = data
        .filter(item => item && item.appCount > 0)
        .map(item => ({
          value: Number(item.appCount) || 0,
          name: String(item.bizTypeName) || '未知类型'
        }))
        .filter(item => item.value > 0)
      
      if (chartData.length === 0) {
        console.log('饼图处理后数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: title,
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          series: [{
            name: '业务类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [{ value: 0, name: '暂无数据' }]
          }]
        }
        this.bizTypePieChart.setOption(emptyOption, true)
        return
      }
      
      const option = {
        title: {
          text: title,
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle'
        },
        series: [{
          name: '业务类型',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['60%', '50%'],
          data: chartData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      
      // 使用安全的设置方法
      safeSetOption(this.bizTypePieChart, option, true)
      console.log('饼图渲染完成')
    },
    
    // 渲染下载量排行榜
    renderDownloadRankingChart(data) {
      if (!this.downloadRankingChart) {
        console.warn('下载量排行榜图表实例不存在')
        return
      }
      
      // 数据验证
      if (!data || !Array.isArray(data) || data.length === 0) {
        console.log('下载量排行榜数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: '下载量排行榜',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '下载量',
            type: 'bar',
            data: [0]
          }]
        }
        this.downloadRankingChart.setOption(emptyOption, true)
        return
      }
      
      // 处理数据
      const chartData = data
        .filter(item => item && item.appName)
        .map(item => ({
          name: String(item.appName) || '未知应用',
          value: Number(item.downloadCount) || 0
        }))
        .filter(item => item.value >= 0)
      
      if (chartData.length === 0) {
        console.log('下载量排行榜处理后数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: '下载量排行榜',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '下载量',
            type: 'bar',
            data: [0]
          }]
        }
        this.downloadRankingChart.setOption(emptyOption, true)
        return
      }
      
      const option = {
        title: {
          text: '下载量排行榜',
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: chartData.map(item => item.name),
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '下载量',
          type: 'bar',
          data: chartData.map(item => item.value),
          itemStyle: {
            color: '#188df0'
          }
        }]
      }
      
      // 使用安全的设置方法
      safeSetOption(this.downloadRankingChart, option, true)
      console.log('下载量排行榜渲染完成')
    },
    
    // 渲染浏览量排行榜
    renderViewRankingChart(data) {
      if (!this.viewRankingChart) {
        console.warn('浏览量排行榜图表实例不存在')
        return
      }
      
      // 数据验证
      if (!data || !Array.isArray(data) || data.length === 0) {
        console.log('浏览量排行榜数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: '浏览量排行榜',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '浏览量',
            type: 'bar',
            data: [0]
          }]
        }
        this.viewRankingChart.setOption(emptyOption, true)
        return
      }
      
      // 处理数据
      const chartData = data
        .filter(item => item && item.appName)
        .map(item => ({
          name: String(item.appName) || '未知应用',
          value: Number(item.viewCount) || 0
        }))
        .filter(item => item.value >= 0)
      
      if (chartData.length === 0) {
        console.log('浏览量排行榜处理后数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: '浏览量排行榜',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '浏览量',
            type: 'bar',
            data: [0]
          }]
        }
        this.viewRankingChart.setOption(emptyOption, true)
        return
      }
      
      const option = {
        title: {
          text: '浏览量排行榜',
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: chartData.map(item => item.name),
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '浏览量',
          type: 'bar',
          data: chartData.map(item => item.value),
          itemStyle: {
            color: '#ff6b6b'
          }
        }]
      }
      
      // 使用安全的设置方法
      safeSetOption(this.viewRankingChart, option, true)
      console.log('浏览量排行榜渲染完成')
    },
    
    // 渲染趋势分析图
    renderTrendChart(data) {
      if (!this.trendAnalysisChart) {
        console.warn('趋势分析图表实例不存在')
        return
      }
      
      const title = this.trendTab === 'download' ? '下载量趋势分析' : '浏览量趋势分析'
      const seriesName = this.trendTab === 'download' ? '下载量' : '浏览量'
      
      console.log('渲染趋势图表，数据:', data)
      console.log('数据长度:', data ? data.length : 0)
      
      // 数据验证
      if (!data || !Array.isArray(data) || data.length === 0) {
        console.log('趋势数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: title,
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: seriesName,
            type: 'line',
            data: [0]
          }]
        }
        this.trendAnalysisChart.setOption(emptyOption, true)
        return
      }
      
      // 处理数据
      const chartData = data
        .filter(item => item && item.date)
        .map(item => ({
          date: String(item.date) || '',
          value: Number(item.value) || 0
        }))
        .filter(item => item.date)
      
      if (chartData.length === 0) {
        console.log('趋势数据处理后为空，显示空状态')
        const emptyOption = {
          title: {
            text: title,
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: seriesName,
            type: 'line',
            data: [0]
          }]
        }
        this.trendAnalysisChart.setOption(emptyOption, true)
        return
      }
      
      const option = {
        title: {
          text: title,
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: chartData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: seriesName,
          type: 'line',
          data: chartData.map(item => item.value),
          smooth: true,
          areaStyle: {
            color: 'rgba(24, 144, 255, 0.3)'
          }
        }]
      }
      
      // 使用安全的设置方法
      safeSetOption(this.trendAnalysisChart, option, true)
      console.log('趋势分析图渲染完成')
    },
    
    // 渲染开发者排行榜
    renderDeveloperRankingChart(data) {
      if (!this.developerRankingChart) {
        console.warn('开发者排行榜图表实例不存在')
        return
      }
      
      // 数据验证
      if (!data || !Array.isArray(data) || data.length === 0) {
        console.log('开发者排行榜数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: '开发者排行榜',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '应用数量',
            type: 'bar',
            data: [0]
          }]
        }
        this.developerRankingChart.setOption(emptyOption, true)
        return
      }
      
      // 处理数据
      const chartData = data
        .filter(item => item && item.developerName)
        .map(item => ({
          name: String(item.developerName) || '未知开发者',
          value: Number(item.appCount) || 0
        }))
        .filter(item => item.value >= 0)
      
      if (chartData.length === 0) {
        console.log('开发者排行榜处理后数据为空，显示空状态')
        const emptyOption = {
          title: {
            text: '开发者排行榜',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' }
          },
          xAxis: {
            type: 'category',
            data: ['暂无数据']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '应用数量',
            type: 'bar',
            data: [0]
          }]
        }
        this.developerRankingChart.setOption(emptyOption, true)
        return
      }
      
      const option = {
        title: {
          text: '开发者排行榜',
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: chartData.map(item => item.name),
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '应用数量',
          type: 'bar',
          data: chartData.map(item => item.value),
          itemStyle: {
            color: '#52c41a'
          }
        }]
      }
      
      // 使用安全的设置方法
      safeSetOption(this.developerRankingChart, option, true)
      console.log('开发者排行榜渲染完成')
    }
  },
  
  beforeDestroy() {
    // 清理图表实例
    if (this.bizTypePieChart) this.bizTypePieChart.dispose()
    if (this.downloadRankingChart) this.downloadRankingChart.dispose()
    if (this.viewRankingChart) this.viewRankingChart.dispose()
    if (this.trendAnalysisChart) this.trendAnalysisChart.dispose()
    if (this.developerRankingChart) this.developerRankingChart.dispose()
    
    window.removeEventListener('resize', this.resizeCharts)
  }
}
</script>

<style scoped>
.statistics-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 60, 126, 0.12);
}

.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-icon {
  height: 35px;
}

.page-title h2 {
  margin: 0;
  color: #00152A;
  font-size: 24px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-home-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.back-home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(82, 196, 26, 0.4);
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0, 60, 126, 0.12);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 60, 126, 0.2);
}

.stat-card:hover::before {
  left: 100%;
}

.stat-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #00152A;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.charts-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.charts-row {
  display: grid;
  gap: 20px;
}

.charts-row:first-child {
  grid-template-columns: 1fr 1fr;
}

.charts-row:last-child {
  grid-template-columns: 1fr 1fr 1fr;
}

.chart-section {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 8px 32px rgba(0, 60, 126, 0.12);
  transition: all 0.3s ease;
}

.chart-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 60, 126, 0.15);
}

.large-chart {
  min-height: 500px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-header h3 {
  margin: 0;
  color: #00152A;
  font-size: 18px;
  font-weight: 600;
}

.chart-content {
  height: 400px;
}

.large-chart .chart-content {
  height: 450px;
}

.chart {
  width: 100%;
  height: 100%;
}

@media (max-width: 1200px) {
  .charts-row:last-child {
    grid-template-columns: 1fr 1fr;
  }
  
  .charts-row:last-child .chart-section:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .overview-cards {
    grid-template-columns: 1fr;
  }
  
  .charts-row:first-child,
  .charts-row:last-child {
    grid-template-columns: 1fr;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .chart-content {
    height: 350px;
  }
  
  .large-chart .chart-content {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .statistics-dashboard {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px;
    flex-direction: column;
    gap: 15px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
  }
  
  .chart-content {
    height: 300px;
  }
  
  .large-chart .chart-content {
    height: 350px;
  }
}
</style>